<template>
  <div>
    <van-nav-bar title="用款详情" left-arrow @click-left="$router.back()"/>
    <div class="loanBox">
      <div class="user-info-num">
        <div class="loan-title">{{contractInfo.prodNam}}</div>
        <div class="loan-code">合同编码 {{contractInfo.contractId}}</div>
        <div class="user-info-ul">
          <div class="user-info-li">
            <div class="li-price">{{ abTools.comdify(Number(contractInfo.contractAmt).toFixed(2)) }}</div>
            <p class="li-title">授信金额（元）</p>
          </div>
          <van-divider class="vertical" />
          <div class="user-info-li">
            <div class="li-price">{{ abTools.comdify(Number(Number(contractInfo.contractAmt) - Number(contractInfo.usageAmt)).toFixed(2)) }}</div>
            <p class="li-title">可用额度（元）</p>
          </div>
          <van-divider class="vertical" />
          <div class="user-info-li">
            <div class="li-price">{{ abTools.comdify(Number(contractInfo.usageAmt).toFixed(2)) }}</div>
            <p class="li-title">已用额度（元）</p>
          </div>
        </div>
      </div>
      <div class="home-list-box">
        <!-- <ab-scroller v-if="InstanceStatus" url="/plugin/mobileBusiCenter/contractList" :params="{status: '00'}">
          <div slot-scope="slotScope"> -->
        <div class="product_main">
          <gz-default-page v-if="!dataList || dataList.length <= 0" :imageSize="'14.8rem'" :textSize="'1.4rem'" :text="'暂无记录'"></gz-default-page>
          <div v-for="(apply,index) in dataList" :key="apply.id">
            <div class="loan-list-style">
              <div class="content-box">
                <div class="arrow-box" @click.stop="showClick(dataList,apply,index)">
                  <div class="foot" v-if='!apply.showMore'>
                    <van-icon name="arrow-down"/>
                  </div>
                  <div class="foot" v-if='apply.showMore'>
                    <van-icon name="arrow-up"/>
                  </div>
                </div>
                <div class="card-item">
                  <div class="item-title">用款编号</div>
                  <div class="item-value">
                    <div :class="apply.outstandPrincipal == '0' ? 'active' : ''">{{apply.useMoneyId}}</div>
                  </div>
                </div>
                <div class="card-item">
                  <div class="item-title">申请日期</div>
                  <div class="item-value">
                    <div :class="apply.outstandPrincipal == '0' ? 'active' : ''">{{apply.createTime.substring(0,10)}}</div>
                  </div>
                </div>
                <div class="card-item">
                  <div class="item-title">用款金额</div>
                  <div class="item-value">
                    <div :class="apply.outstandPrincipal == '0' ? 'active' : ''">{{ abTools.comdify(Number(apply.loanAmt).toFixed(2)) }} 元</div>
                  </div>
                </div>
                <template v-if="apply.showMore">
                  <div class="card-item">
                    <div class="item-title">未还本金</div>
                    <div class="item-value">
                      <div :class="apply.outstandPrincipal == '0' ? 'active' : ''">{{ abTools.comdify(Number(apply.outstandPrincipal).toFixed(2)) }} 元</div>
                    </div>
                  </div>
                  <div class="card-item">
                    <div class="item-title">年化利率</div>
                    <div class="item-value">
                      <div :class="apply.outstandPrincipal == '0' ? 'active' : ''">{{apply.lendingRate}}%</div>
                    </div>
                  </div>
                  <div class="card-item">
                    <div class="item-title">还款方式</div>
                    <div class="item-value">
                      <div :class="apply.outstandPrincipal == '0' ? 'active' : ''">{{apply.bsnReplyRep}}</div>
                    </div>
                  </div>
                  <div class="card-item">
                    <div class="item-title">到&nbsp;&nbsp;期&nbsp;&nbsp;日</div>
                    <div class="item-value">
                      <div :class="apply.outstandPrincipal == '0' ? 'active' : ''">{{apply.dueDate}}</div>
                    </div>
                  </div>
                  <div class="card-item">
                    <div class="item-title">期&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;数</div>
                    <div class="item-value">
                      <div :class="apply.outstandPrincipal == '0' ? 'active' : ''">{{apply.currentPeriod}}/{{apply.loanDeadline}}</div>
                    </div>
                  </div>
                </template>
                <img v-if="apply.outstandPrincipal == '0'" class="repayment-completed" :src="require(`@/assets/public/repayment-completed.png`)" alt=""/>
              </div>
              <div class="footer-box">
                <div class="foot" @click="repaymentPlan(apply)">还款计划</div>
                <van-divider class="vertical" v-if="apply.outstandPrincipal != '0'" />
                <div v-if="apply.outstandPrincipal != '0'" class="foot"  @click="early(apply)">提前还款</div>
              </div>
            </div>
          </div>
        </div>
        <!-- </div>
      </ab-scroller> -->
      </div>
    </div>
    <div class="divider-footer-line">
      <van-divider :style="{ color: 'rgb(201, 205, 212)', borderColor: 'rgb(221, 221, 221)', padding: '0 20%', margin: '0', fontSize: '1.4rem' }">农商银行</van-divider>
      <group-title style="text-align: center;margin: 0;color: rgb(201, 205, 212);font-size: 1rem;">心天地  行天下</group-title>
    </div>
  </div>
</template>

<script>

import Vue from 'vue';
import {gzDefaultPage} from '@/components/customize'
export default {
  name: 'usageDetails',
  components: { gzDefaultPage },
  data: function () {
    return {
      InstanceStatus: null,
      dataList: [],
      active: '',
      contractId: '',
      id: '',
      contractInfo: {
        contractAmt: 0,
        usageAmt: 0,
      }
    }
  },
  created: function () {
    this.contractId = this.$route.query.contractId;
    this.id = this.$route.query.id;
    this.getContractList();
    this.getContractInfo();
  },
  methods: {
    showClick(list, apply, index) {
      apply.showMore = !apply.showMore;
      this.$set(list, index, apply);
    },
    // 用款详情
    getContractList() {
      this.$toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: '加载中...'
      });
      this.baseService.postForm(this.__ctx + '/plugin/mobileBusiCenter/getLoanReceipt', {contractId: this.contractId}).then(res => {
        this.$toast.clear();
        if (res.isOk) {
          this.dataList = res.data;
        } else {
          this.$toast({
            icon: 'warning',
            message: res.msg
          });
        }
      }, function (status) {
        this.$toast.clear();
        if (status == !0) {
          this.$toast({
            icon: 'warning',
            message: '加载失败！' + status
          });
        }
      });
    },
    getContractInfo() {
      this.baseService.postForm(this.__ctx + '/plugin/mobileBusiCenter/getContractInfo', {id: this.id}).then(res => {
        this.$toast.clear();
        if (res.isOk) {
          this.contractInfo = res.data;
        } else {
          this.$toast({
            icon: 'warning',
            message: res.msg
          });
        }
      }, function (status) {
        this.$toast.clear();
        if (status == !0) {
          this.$toast({
            icon: 'warning',
            message: '加载失败！' + status
          });
        }
      });
    },
    // 还款计划
    repaymentPlan(item){
      var query = {
        id: item.id,
        period: item.currentPeriod
      }
      this.$router.push({path:'/loanPage/repaymentPlanCurrent', query: query});
    },
    // 提前还款
    early(item){
      if(item.outstandPrincipal == '0'){
        return;
      }
      var query = {
        id: item.id,
        dura: item.loanDeadline - item.currentPeriod + 1
      }
      this.$router.push({path: '/loanPage/earlyRepayment', query: query});
    },
  }
}
</script>
<style scoped lang="less">
/deep/ ._v-container {
  top: 4.2rem !important;
  height: calc(~'100vh - 8.6rem') !important;
}

/deep/ .van-nav-bar {
  .van-nav-bar__content {
    height: 4.4rem;
    line-height: 2rem;

    .van-icon {
      color: rgb(50, 50, 51);
      font-size: 2rem;
    }

    .van-nav-bar__title {
      font-size: 1.8rem;
    }
  }
}

[class*=van-hairline]::after {
  border: 0;
}

.loanBox{
  overflow-y: auto;
  height: calc(~'100vh - 4.4rem');
}

.user-info-num{
  position: relative;
  background-image:url("../../assets/blueSeries/home-bg.png");
  background-size: 100%;
  background-position: bottom;
  color: rgb(255, 255, 255);
  border-radius: 1rem;
  font-size: 1.6rem;
  margin: 1.2rem;
  min-height: 15.6rem;

  .loan-code{
    font-size: 1.2rem;
    line-height: 1.4rem;
    margin-left: 1.6rem;
    margin-top: 0.8rem;
    color: rgba(255, 255, 255, 0.8);
  }
  .loan-title{
    font-size: 1.8rem;
    line-height: 1.9rem;
    font-weight: 500;
    margin-left: 1.6rem;
    padding-top: 2.4rem;
  }
  .user-info-ul{
    // background: var(--price-bg-color);
    display: flex;
    align-items: center;
    margin: 1.4rem 1.6rem 1.5rem;
    border-radius: 0.5rem;
    text-align: center;
    .user-info-li{
      width: 50%;
      margin: 0.6rem 0;
      .li-title{
        font-size: 1.2rem;
        color: rgba(255, 255, 255, 0.8);
      }
      .li-price{
        font-size: 1.6rem;
        font-weight: 500;
        margin-top: 0.6rem;
      }
    }
    .vertical{
      width: 26px;
      transform: rotate(90deg);
      margin: 0;
      border-color: rgba(255, 255, 255, 0.8);
    }
  }
}
// 橙色系
.orangeSeries .user-info-num {
  background-image: url('../../assets/orangeSeries/usageDetails-bg.png');
}
// 蓝色系
.blueSeries .user-info-num {
  background-image: url('../../assets/blueSeries/usageDetails-bg.png');
}
/*列表样式start*/
.product_main {
//   overflow-y: auto;
//   height: calc(~'100vh - 8.6rem');
margin-bottom: 7.3rem;
}

.loan-list-style {
  background-color: #FFF;
  border-radius: 1.2rem;
  padding: 0.6rem 1.6rem 0;
  box-sizing: border-box;
  margin: 1.2rem;
  overflow: hidden;

  .content-box {
    padding-bottom: 1.2rem;
    font-size: 1.4rem;
    font-weight: 400;
    position: relative;

    .repayment-completed{
      width: 6.45rem;
      position: absolute;
      bottom: -0.6rem;
      right: -1.5rem;
    }

    .arrow-box{
      width: 3rem;
      height: 3rem;
      text-align: center;
      position: absolute;
      top: 1rem;
      right: -1rem;

      /deep/.van-icon {
        color: rgb(201, 205, 212);
        font-size: 1.5rem;
      }
    }
    .card-item {
      display: flex;
      align-items: center;
      padding-top: 1rem;
      min-height: 2rem;

      .item-title {
        color: rgba(29, 33, 41, 0.54);
        margin-right: 1.6rem;
      }

      .item-value {
        color: rgb(29, 33, 41);
          .active {
            color: rgb(78, 89, 105);
          }
      }
    }
  }

  .footer-box {
    font-size: 1.4rem;
    text-align: center;
    border-top: 1px solid rgba(229, 230, 235, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;

    .foot {
      width: 50%;
      height: 4rem;
      line-height: 4rem;
      color: var(--primary-color);
      &.active{
        color: rgb(134, 144, 156);
      }
    }
    .vertical{
      width: 26px;
      transform: rotate(90deg);
      margin: 0;
      border-color: rgba(0, 0, 0, 0.08);
    }
  }
}

/*列表样式end*/
.divider-footer-line{
  width: 100%;
  position: fixed;
  bottom: 0;
  z-index: -1;
}
</style>
